
<template>
  <!-- 中间 -->
  <div class="body flex flex-1 fd-column gap-10">
    <!-- 顶部切换 -->
    <div class="top-nav-tab">
      <div class="c-top">
        <ul>
          <li class="w1 left"></li>
          <li
            :class="['last', 'last-left', curIndex == 1 ? 'on' : '']"
            @click="handleSelect(1)"
          >
            排放因子
          </li>
        </ul>
      </div>
      <div class="c-top">
        <ul>
          <li
            :class="['last', 'last-right', curIndex == 2 ? 'on' : '']"
            @click="handleSelect(2)"
          >
            电力碳足迹
          </li>
          <li class="w1 right"></li>
        </ul>
      </div>
    </div>
    <el-row class="center flex-2 flex fd-row gap-10">
      <!-- 左边 -->
      <el-col :span="6" class="c-left flex-1 flex fd-column gap-10">
        <div class="c-left1 left-h e-card flex-1">
          <Title :name="titleName1" />
          <SelectOption @change="handleSelectOptionL1" />
          <LeftBar3
            :barChartData="barChartData"
            v-if="barChartData.dataY.length"
          />
          <EmptyA v-else />
        </div>
        <div class="c-left2 left-h e-card flex-1">
          <Title :name="titleName2" />
          <SelectOption
            :isDs="true"
            @changeds="handleSelectOptionDS"
            @change="handleSelectOptionL2"
          />
          <RightBar2
            :chartData="barChartData2"
            height="65%"
            v-if="barChartData2.dataX.length"
          />
          <EmptyA v-else />
        </div>
      </el-col>
      <!-- 中间 -->
      <el-col :span="12" class="c-center flex-2 flex">
        <div class="c-center1 e-card flex-1">
          <DistributionMap :data="mapApiData" v-if="mapApiData.length" />
          <EmptyA v-else />
        </div>
        <el-row :gutter="20" class="paddlr">
          <el-col :span="12">
            <Title :name="{ tname: '电源构成' }" :isT2="true" />
            <BottomData :botData="botData" type="1" />
          </el-col>
          <el-col :span="12">
            <Title :name="{ tname: '发电量占比' }" :isT2="true" />
            <BottomData :botData="botData" type="2" />
          </el-col>
        </el-row>
      </el-col>
      <!-- 右边 -->
      <el-col :span="6" class="c-right flex-1 flex fd-column gap-10">
        <div class="c-right1 e-card flex-1">
          <Title :name="titleName4" />
          <SelectOption @change="handleSelectOptionR" />
          <RightBar1
            :chartData="UpperData"
            height="67%"
            v-if="UpperData.dataX.length"
          />
          <EmptyA v-else />
        </div>
        <div class="c-right2 e-card flex-1">
          <Title :name="titleName5" />
          <div class="table-search">
            <div class="search-label">名称</div>
            <TableSelect
              title=""
              :dataList="nameList"
              type="1"
              @change="handleSelectTable"
              :isInput="true"
            />
            <div class="search-label ml">区域</div>
            <TableSelect
              title=""
              :dataList="areaList"
              type="2"
              width="94px"
              @change="handleSelectTable"
              :isInput="true"
            />
            <div class="search-label ml">年度</div>
            <TableSelect
              title=""
              :dataList="yearArr"
              type="3"
              @change="handleSelectTable"
            />
            <div class="search-box" @click="tableSearch">
              <img
                src="@/assets/imgs/electricity/search-icon.png"
                alt="搜索图标"
              />
              <span>搜索</span>
            </div>
          </div>
          <div class="table-head">
            <div class="table-th">名称</div>
            <div class="table-th">区域</div>
            <div class="table-th">年度</div>
            <div class="table-th">数值</div>
            <div class="table-th">单位</div>
            <div class="table-th">来源</div>
          </div>

          <div class="table-body" id="scrollContainer" v-if="dataList.length">
            <div
              class="table-tr"
              v-for="(item, index) in dataList"
              :key="index"
            >
              <div
                class="table-td"
                v-for="item2 in item"
                :key="item2"
                :title="item2"
              >
                {{ item2 }}
              </div>
            </div>

            <el-pagination
              background
              class="table-pagination"
              layout="prev, pager, next"
              :total="pageParams.total"
              prev-text="上一页"
              next-text="下一页"
              :current-page="pageParams.pageNum"
              :page-size="pageParams.pageSize"
              @current-change="handleCurrentChange"
            />
          </div>
          <EmptyA v-else />
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import DistributionMap from "./components/DistributionMap.vue";
import Title from "@/components/title/index.vue";
import LeftBar3 from "./components/LeftBar3.vue";
import RightBar1 from "./components/RightBar1.vue";
import RightBar2 from "./components/RightBar2.vue";
import SelectOption from "./components/SelectOption.vue";
import BottomData from "./components/BottomData.vue";
import EmptyA from "./components/EmptyA.vue";
import TableSelect from "./components/TableSelect.vue";
import {
  getEndCompositionAndProportion,
  getRigthEntDBList,
  getLeftFactorsList,
  getUpperRightPartialList,
  getMapList,
} from "@/api/electricity";
import * as mapData from "@/utils/sichuan";
export default {
  components: {
    DistributionMap,
    LeftBar3,
    RightBar1,
    RightBar2,
    Title,
    SelectOption,
    BottomData,
    EmptyA,
    TableSelect,
  },
  data() {
    return {
      titleName1: { tname: "四川省电力碳排放因子", china: "", sichuan: "" },
      titleName2: { tname: "地市电力碳排放因子", china: "", sichuan: "" },
      titleName4: {
        tname: "分压电力碳排放因子",
        china: "",
        sichuan: "",
      },
      titleName5: {
        tname: "电碳因子背景数据库",
        china: "",
        sichuan: "",
      },
      curIndex: 1,
      botData: {},
      dataList: [],
      selectCity: [],
      barChartData: {
        dataY: [],
        dataX: [],
      },
      barChartData2: {
        dataY: [],
        dataX: [],
      },
      UpperData: {
        dataY: [],
        dataX: [],
      },
      ftype: "year",
      fdatatime: "",
      regionlist: "成都市,自贡市,攀枝花市,泸州市,德阳市",
      pageParams: {
        pageNum: 1,
        pageSize: 5,
        total: 0,
        name: "",
        region: "",
        year: "",
      },
      mapApiData: [],
      areaList: [],
      yearArr: [],
      nameList: [],
    };
  },
  mounted() {
    let tabType = localStorage.getItem("tabType");
    console.log(tabType);
    tabType ? (this.curIndex = tabType) : localStorage.setItem("tabType", 1);
    // 地市下拉数据赋值
    this.selectCity = mapData.default.features;
    // 区域下拉赋值
    this.areaList = mapData.default.features.map(
      (item) => item.properties.name
    );
    this.init();
    // document.addEventListener("DOMContentLoaded", () => {
    //   const scrollContainer = document.getElementById("scrollContainer");
    //   if (scrollContainer) {
    //     scrollContainer.addEventListener("scroll", () => {
    //       // 计算滚动条是否触底
    //       if (
    //         scrollContainer.scrollTop + scrollContainer.clientHeight >=
    //         scrollContainer.scrollHeight
    //       ) {
    //         console.log("滚动条触底了！");
    //         // 在这里执行你需要的操作
    //         this.pageParams.pageNum += 1;
    //         this.getDataList();
    //       }
    //     });
    //   }
    // });
    this.getYears();
  },
  methods: {
    getYears() {
      // 获取当前年份
      const currentYear = new Date().getFullYear();
      // 计算往前推5年的年份
      const fiveYearsAgo = currentYear - 5;
      // 计算往后推5年的年份
      const fiveYearsLater = currentYear + 5;
      let yearArr = [];
      for (let i = fiveYearsAgo; i <= fiveYearsLater; i++) {
        yearArr.push(i);
      }
      this.yearArr = yearArr;
    },
    handleSelectTable(obj) {
      switch (obj.type) {
        case "1":
          this.pageParams.pageNum = 1;
          this.pageParams.name = obj.name;
          break;
        case "2":
          this.pageParams.pageNum = 1;
          this.pageParams.region = obj.name;
          break;
        case "3":
          this.pageParams.pageNum = 1;
          this.pageParams.year = obj.name;
          break;
        default:
          break;
      }
    },
    tableSearch() {
      this.pageParams.pageNum = 1;
      console.log(this.pageParams, "===");
      this.getDataList();
    },
    init() {
      this.getBotData();
      this.getDataList();
      this.getEmissionFactor();
      this.getEmissionFactor2();
      this.getUpperFactor();
      getMapList().then((res) => {
        this.mapApiData = res.data;
      });
    },
    // 获取分压电力碳排因子
    getUpperFactor() {
      this.UpperData.dataX = [];
      this.UpperData.dataY = [];
      getUpperRightPartialList({
        type: this.ftype,
        datatime: this.fdatatime,
      }).then((res) => {
        let data = res.data;
        const groupedData = data.reduce((acc, item) => {
          const category = item.partial;
          if (!acc[category]) {
            acc[category] = [];
          }
          acc[category].push(item);
          return acc;
        }, {});
        for (let key in groupedData) {
          this.UpperData.dataY.push({
            name: key,
            val: groupedData[key].map((item) => item.val),
          });
          this.UpperData.dataX = groupedData[key].map((item) => item.datatime);
        }
        console.log(this.UpperData);
      });
    },
    // 地市选择
    handleSelectOptionDS(str) {
      this.regionlist = str;
      this.getEmissionFactor2();
    },
    dataComZ(list) {
      console.log(list);
      let type = list[0].options.find(
        (item) => item.text == list[0].title
      ).value;
      this.ftype = type;
      switch (list[0].title) {
        case "年":
          this.fdatatime = "";
          break;
        case "月":
          this.fdatatime = list[1].title;
          break;
        case "日":
          this.fdatatime =
            list[1].title +
            "-" +
            (list[2].title < 10 ? "0" + list[2].title : list[2].title);
          break;
        case "小时":
          this.fdatatime =
            list[1].title +
            "-" +
            (list[2].title < 10 ? "0" + list[2].title : list[2].title) +
            "-" +
            (list[3].title < 10 ? "0" + list[3].title : list[3].title);
          break;
        case "分钟":
          this.fdatatime =
            list[1].title +
            "-" +
            (list[2].title < 10 ? "0" + list[2].title : list[2].title) +
            "-" +
            (list[3].title < 10 ? "0" + list[3].title : list[3].title);
          break;
        default:
          break;
      }
    },
    // 右上角下拉选择
    handleSelectOptionR(list) {
      this.dataComZ(list);
      this.getUpperFactor();
    },
    // 左上角下拉选择
    handleSelectOptionL1(list) {
      this.dataComZ(list);
      this.getEmissionFactor();
    },
    // 左下角下拉选择
    handleSelectOptionL2(list) {
      this.dataComZ(list);
      this.getEmissionFactor2();
    },
    handleSelect(i) {
      this.curIndex = i;
      localStorage.setItem("tabType", i);
      location.reload();
      this.init();
    },
    // 获取电源构成、发电量占比数据
    getBotData() {
      getEndCompositionAndProportion().then((res) => {
        this.botData = res.data;
      });
    },
    // 获取电源因子背景数据库
    getDataList() {
      this.dataList = [];
      getRigthEntDBList(this.pageParams).then((res) => {
        let data = [...res.rows];
        this.dataList = data;
        this.pageParams.total = res.total;
        this.nameList = data.map((item) => item.name);
      });
    },
    handleCurrentChange(v) {
      this.pageParams.pageNum = v;
      this.getDataList();
    },
    // 获取四川省电力碳排放因子
    getEmissionFactor() {
      let params = {
        region: "四川",
        type: this.ftype,
        datatime: this.fdatatime,
      };
      this.barChartData.dataY = [];
      this.barChartData.dataX = [];
      getLeftFactorsList(params).then((res) => {
        let data = res.data;
        data.forEach((element) => {
          this.barChartData.dataY.push(element.val);
          this.barChartData.dataX.push(element.datatime);
        });
      });
    },
    getEmissionFactor2() {
      let params = {
        type: this.ftype,
        datatime: this.fdatatime,
      };
      if (this.regionlist) {
        params.regionlist = this.regionlist;
      }
      this.barChartData2.dataY = [];
      this.barChartData2.dataX = [];
      getLeftFactorsList(params).then((res) => {
        let data = res.data;
        const groupedData = data.reduce((acc, item) => {
          const category = item.region;
          if (!acc[category]) {
            acc[category] = [];
          }
          acc[category].push(item);
          return acc;
        }, {});
        for (let key in groupedData) {
          this.barChartData2.dataY.push({
            name: key,
            val: groupedData[key].map((item) => item.val),
          });
          this.barChartData2.dataX = groupedData[key].map(
            (item) => item.datatime
          );
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.center,
.body {
  width: 97%;
  margin: auto;
  height: 100%;
}
.header {
  background: #a56d97;
}

.c-left,
.c-right {
  display: flex;
  flex-direction: column;
}

.c-right1 {
  height: calc(100% * 0.5);
}
.c-right2 {
  height: calc(100% * 0.5);
}
.left-h {
  height: calc(100% * 0.5);
}
.c-left1 {
  .ti2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #fff;
    margin: 12px 0;
    padding-left: 9px;
    font-family: "MiSans-Medium";
  }
}

.c-left2 {
  // background: #6d73a5;
}
.c-center1 {
  height: calc(100% * 0.8);
}

.container {
  // --header-hight: 100px;
  height: 100%;
  width: 100%;
  background: #03213d;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border: 1px;
}
.top-nav-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 93%;
  position: absolute;
  left: 50%;
  top: 45px;
  transform: translate(-50%, 0);
}
.c-top {
  ul {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    li {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .w1 {
      width: 334px;
      height: 27px;
    }
    li.left {
      background: url("@/assets/imgs/electricity/top-left-img.png") no-repeat
        center;
    }
    li.right {
      background: url("@/assets/imgs/electricity/top-right-img.png") no-repeat
        center;
    }
    .last {
      width: 167px;
      height: 27px;
      line-height: 27px;
      font-family: "优设标题";
      font-size: 20px;
      transform: skewX(-9deg); /* 水平倾斜10度 */
      text-align: center;
      color: #fff;
      &:hover {
        cursor: pointer;
      }
    }
    .last-left {
      background: url("@/assets/imgs/electricity/top-left-imgno.png") no-repeat;
      &.on {
        background: url("@/assets/imgs/electricity/top-left-imgon.png")
          no-repeat;
      }
    }
    .last-right {
      background: url("@/assets/imgs/electricity/top-right-imgno.png") no-repeat;
      &.on {
        background: url("@/assets/imgs/electricity/top-right-imgon.png")
          no-repeat;
      }
    }
  }
}
.paddlr {
  padding: 0 40px;
  margin-top: -50px;
}
.table-search {
  display: flex;
  align-items: center;
  margin-top: 10px;
  .search-label {
    font-size: 14px;
    font-family: "苹方中等";
    color: rgba(199, 225, 255, 1);
    margin-right: 5px;
    &.ml {
      margin-left: 13px;
    }
  }
  .search-box {
    width: 61px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("@/assets/imgs/electricity/search-bg.png") no-repeat center;
    background-size: 100% 100%;
    cursor: pointer;
    margin: 0 0 0 10px;
    span {
      color: rgba(199, 225, 255, 1);
      font-size: 12px;
      font-family: "苹方中等";
      margin-left: 5px;
    }
    img {
      width: 10px;
      height: 10px;
      vertical-align: middle;
    }
  }
}
.table-head {
  width: 99%;
  height: 32px;
  line-height: 33px;
  margin-top: 15px;
  margin-left: 5px;
  display: flex;
  justify-content: space-between;
  background: url("@/assets/imgs/electricity/table-thbg.png") no-repeat;
  background-size: 100% 100%;
  .table-th {
    width: 65px;
    font-size: 14px;
    font-family: "苹方中等";
    color: #c7e1ff;
    text-align: center;
    position: relative;
    img {
      vertical-align: middle;
    }
  }
}
.table-body {
  margin-left: 5px;
  background: RGBA(24, 45, 68, 0.5);
  padding-bottom: 22px;
  height: 272px;
  overflow: auto;
  .table-tr {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    &:nth-child(even) {
      background-color: rgba(85, 201, 255, 0.06);
    }
    &:nth-child(odd) {
      background-color: rgba(160, 225, 255, 0.15);
    }
    .table-td {
      width: 65px;
      height: 37px;
      line-height: 37px;
      font-size: 14px;
      font-family: "苹方中等";
      color: #fff;
      text-align: center;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      &:hover {
        cursor: pointer;
      }
    }
  }
}
/* 针对WebKit浏览器（如Chrome、Safari） */
::-webkit-scrollbar {
  display: none;
}

/* 针对Firefox浏览器 */
* {
  scrollbar-width: none; /* 可选项：自动（auto）或无（none） */
}
.table-pagination {
  margin: 15px auto 0;
  display: flex;
  justify-content: center;
}
::v-deep .el-pagination.is-background .btn-next,
::v-deep .el-pagination.is-background .btn-prev,
::v-deep .el-pagination.is-background .el-pager li {
  font-size: 12px;
  font-family: "苹方中等";
  color: rgba(236, 241, 255, 1);
  background-color: rgba(26, 53, 74, 1);
}
::v-deep .el-pagination.is-background .btn-next {
  height: 24px;
  line-height: 24px;
  background: linear-gradient(
      180deg,
      rgba(30, 72, 127, 1) 0%,
      rgba(49, 115, 201, 1) 100%
    ),
    #fff;
  box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}
::v-deep .el-pagination.is-background .btn-prev {
  height: 24px;
  line-height: 24px;
  box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}
::v-deep .el-pagination.is-background .el-pager li {
  width: 24px;
  height: 24px;
  line-height: 24px;
  box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}
::v-deep .el-pagination.is-background .btn-next.is-active,
::v-deep .el-pagination.is-background .btn-prev.is-active,
::v-deep .el-pagination.is-background .el-pager li.is-active {
  background: linear-gradient(
      180deg,
      rgba(30, 72, 127, 1) 0%,
      rgba(49, 115, 201, 1) 100%
    ),
    #fff;
}
::v-deep .el-pagination.is-background .btn-prev:disabled,
::v-deep .el-pagination.is-background .btn-next:disabled {
  background-color: rgba(26, 53, 74, 1);
}
</style>